<template>
    <div class="zs-card-with-header">
        <div class="zs-card-header">
            <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
            <div class="zs-title">客流指标</div>
            <div class="zs-layout-grow zs-layout-flex-row zs-layout-justify-end zs-layout-items-center">
                <el-button class="zs-link" link size="small" v-btnPermi="{permi: props.btnPermiList[0]}" @click="goDetail">明细</el-button>
            </div>
        </div>
        <div class="zs-card-content">
            <div class="zs-layout-flex-row zs-layout-justify-between">
                <template v-for="(item, index) in grayCardList" :key="index">
                    <GrayCard class="zs-layout-grow" :class="{ 'zs-space-right': index < grayCardList.length - 1 }" :isBlueCard="true"
                        :list="item.list" :title="item.title"></GrayCard>
                </template>
            </div>
            <el-table :data="tableData" :cell-class-name="getCellClassName" :header-cell-style="getHeaderCellStyle">
                <el-table-column prop="name" label="指标" width="220" :align="'left'" class-name="db-table-cell-border-right" />
                <el-table-column prop="1" label="1月" :align="'right'" />
                <el-table-column prop="2" label="2月" :align="'right'" />
                <el-table-column prop="3" label="3月" :align="'right'" />
                <el-table-column prop="4" label="4月" :align="'right'" />
                <el-table-column prop="5" label="5月" :align="'right'" />
                <el-table-column prop="6" label="6月" :align="'right'" />
                <el-table-column prop="7" label="7月" :align="'right'" />
                <el-table-column prop="8" label="8月" :align="'right'" />
                <el-table-column prop="9" label="9月" :align="'right'" />
                <el-table-column prop="10" label="10月" :align="'right'" />
                <el-table-column prop="11" label="11月" :align="'right'" />
                <el-table-column prop="12" label="12月" :align="'right'" />
                <el-table-column prop="total" label="合计" :align="'right'" />
            </el-table>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top zs-layout-flex-row zs-layout-justify-between">
                <span>{{ unit }}</span>
            </div>
            <div class="zs-layout-flex-row zs-space-top-lg zs-space-bottom">
                <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title-sm">月度客流量</div>
            </div>
            <BarLineEchart class="zs-layout-grow zs-overflow-auto" :echartId="'passengerFlowIndex'" :isShowY="true"
                :yAxisName="'（万人次）'" :isShowLegend="true" :rightDownExplain="`数据截止：${date}`" :echartData="echartData">
            </BarLineEchart>
        </div>
    </div>
</template>
<script setup>
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import { ref, watch } from 'vue';
import GrayCard from '@/DbUiComponents/grayCard'
import BarLineEchart from "@/components/EchartComponent/BarLineEchart";
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
    btnPermiList: {
        type: Array,
        required: true,
        default: () => { return [] }
    },
    isFresh: {
        type: String,
        required: false,
        default: ''
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    yearmonth: {
        type: String,
        required: false,
        default: ''
    },
    tabPermi: {
        type: String,
        required: false,
        default: ''
    },
})

const unit = ref()
const date = ref()
const grayCardList = ref([])
const tableData = ref([])
const echartData = ref({})

// 当前月份
const curMonth = ref()
const initData = (yearmonth) => {
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''
    curMonth.value = month
}

// { row, column, rowIndex, columnIndex }
const getCellClassName = ({ row, column, columnIndex }) => {
    if (columnIndex > curMonth.value && column.label != '合计') {
        return 'zs-text-gray-ccc'
    }
    if (row[`${column.property}Color`] == 1) {
        return 'zs-text-red'
    }
}

const getHeaderCellStyle = ({ column, columnIndex }) => {
    if (columnIndex > curMonth.value && column.label != '合计') {
        return { color: '#999999' }
    }
}

const getData = () => {
    digitalMonthlyReportApi.customerTargetApi({ dataTime: props.yearmonth, projectCode: props.biProjectCode }).then(res => {
        if (res.data.code == 200) {
            unit.value = res.data.data.unit
            date.value = res.data.data.date
            grayCardList.value = res.data.data.card
            tableData.value = res.data.data.table
            echartData.value = res.data.data.echart
        }
    });
}

watch(() => { props.isFresh }, () => {
    initData(props.yearmonth)
    getData()
}, { deep: true, immediate: true });

const goDetail = () => {
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Manage/Business/DigitalMonthlyReport/passengerFlowDetail',
            rTitle: '客流',
            tabPermi: props.tabPermi,
            biProjectCode: props.biProjectCode,
            yearmonth: props.yearmonth,
        },
    })
}
</script>

<style scoped lang="scss"></style>
